<template>
	<u-popup :show="show" mode="center" @close="close" bgColor="transparent">
		<view class="container">
			<!-- 触发按钮 -->
			<!-- <button @click="startSynth" class="start-btn">
				开始合成
			</button> -->

			<!-- 合成容器 -->
			<view v-if="isSynthStarted" class="synth-container">
				<!-- 碎片元素（随机分布） -->
				<view v-for="(fragment, index) in fragments" :key="index" :style="{
          position: 'absolute',
          top: fragment.top,
          left: fragment.left,
          opacity: fragment.opacity,
          width: fragment.size + 'rpx',
          height: fragment.size + 'rpx',
          backgroundColor: fragment.bgColor,
          borderRadius: fragment.borderRadius
        }" class="fragment" :class="fragment.animationClass"></view>

				<!-- 合成结果 -->
				<view v-if="isResultVisible" class="result">
					<svg class="result-icon" viewBox="0 0 100 100">
						<circle cx="50" cy="50" r="40" fill="none" stroke="#fff" stroke-width="4"
							class="success-stroke" />
						<path d="M35,50 L45,60 L65,40" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round"
							stroke-linejoin="round" class="success-stroke" />
					</svg>
				</view>
			</view>

			<!-- 成功提示 -->
			<view v-if="showSuccess" class="success-message">
				合成成功！
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isSynthStarted: false, // 合成开始状态
				isResultVisible: false, // 结果是否显示
				showSuccess: false, // 成功提示
				fragments: [{
						top: '20%',
						left: '20%',
						size: 66,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '66rpx'
					},
					{
						top: '70%',
						left: '30%',
						size: 88,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '50%'
					},
					{
						top: '40%',
						left: '80%',
						size: 120,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '82rpx'
					},
					{
						top: '60%',
						left: '60%',
						size: 90,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '50%'
					},
					{
						top: '30%',
						left: '50%',
						size: 110,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '66rpx'
					},
					{
						top: '80%',
						left: '20%',
						size: 70,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '82rpx'
					},
					{
						top: '25%',
						left: '70%',
						size: 100,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '50%'
					},
					{
						top: '65%',
						left: '40%',
						size: 90,
						opacity: 0,
						bgColor: '#60a5fa',
						borderRadius: '66rpx'
					}
				]
			};
		},
		methods: {
			close(){},
			startSynth() {
				this.isSynthStarted = true;
				// 随机延迟显示碎片，营造错落感
				this.fragments.forEach((fragment, index) => {
					setTimeout(() => {
						fragment.opacity = 1;
						fragment.animationClass = 'fragment-move';
					}, 300 + index * 100);
				});

				// 碎片汇聚后显示结果
				setTimeout(() => {
					this.isResultVisible = true;
					setTimeout(() => {
						this.showSuccess = true;

						// 5秒后重置
						setTimeout(this.reset, 2000);
					}, 1000);
				}, 2000);
			},
			reset() {
				this.isSynthStarted = false;
				this.isResultVisible = false;
				this.showSuccess = false;
				this.fragments.forEach(fragment => {
					fragment.opacity = 0;
					fragment.animationClass = '';
				});
				this.$emit('success')
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* background-color: #1a1a1a; */
		height: 50vh;
	}

	.start-btn {
		background-color: #3b82f6;
		color: white;
		font-weight: bold;
		padding: 12px 24px;
		border-radius: 9999px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}

	.start-btn:hover {
		background-color: #2563eb;
	}

	.synth-container {
		position: relative;
		width: 80vw;
		height: 80vh;
	}

	.fragment {
		position: absolute;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.result {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40vw;
		height: 40vw;
		border-radius: 50%;
		background-color: #3b82f6;
		box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
		animation: glow-pulse 2s ease-in-out infinite;
	}

	.success-message {
		/* margin-top: 20px; */
		color: #10b981;
		font-size: 48rpx;
		font-weight: bold;
		animation: fade-in 0.6s ease-out forwards;
	}

	/* 动画样式 */
	@keyframes fragmentMove {
		0% {
			opacity: 0.7;
			transform: scale(0.8) rotate(0deg);
		}

		70% {
			opacity: 1;
			transform: scale(1.1) rotate(15deg);
		}

		100% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
	}

	@keyframes glow-pulse {

		0%,
		100% {
			filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.8));
		}

		50% {
			filter: drop-shadow(0 0 15px rgba(96, 165, 250, 1));
		}
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes scale-pop {
		0% {
			transform: scale(0);
		}

		70% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}
</style>